﻿<!DOCTYPE HTML>
<html>
<head>
    <meta charset="gb2312">
    <meta name="viewport" content="width=1024">
    <title>jQuery卡通幸运大转盘代码 - A5源码</title>
    <link href="css/min.css" rel="stylesheet">
    <script src="js/min.js"></script>
    <script src="js/jquery-transform-animate.js"></script>
    <script src="js/jquery-wheel.js"></script>
</head>

<body id="home-fx">
<div id="wrapper">
<div id="header"><h2>Jquery大转盘：JqueryWheel</h2></div>
<div id="doc">
<div id="main-feature">
    <div id="wheel-frame" class="a">
        <span id="spin" onclick="javascript:window.switchPage()"><img src="images/spinner.png" alt="Click to Spin" height="90" width="89"></span>
        <div id="wheel" onclick="javascript:window.switchPage()">
            <div id="section-a" class="section">WordPress</div>
            <div id="section-b" class="section">PhpWind </div>
            <div id="section-c" class="section">Discuz X</div>
        </div>
        <img src="images/stand.png" alt="" id="wheel-stand">
        <div id="wheel-creature"></div>
        <div id="wheel-panel" class="pager pager-no-history">

            <div class="pager-content">

                <div class="wheel-panel-contents" id="feature-a">
                    <script>// <![CDATA[
                    document.getElementById('feature-a').id = 'page-feature-a';
                    // ]]></script>
                    <h3>jQuery<span>A5源码</span></h3>
                    <p>A5源码致力于收集jQuery插件和提供各种jQuery特效的详细使用方法,在线预览，jQuery插件下载及教程</p>
                    <a href="http://sc.admin5.com">去看看吧 &raquo;</a>
                </div>
                <div class="wheel-panel-contents" id="feature-c">
                    <script>// <![CDATA[
                    document.getElementById('feature-c').id = 'page-feature-c';
                    // ]]></script>
                   
                    <a href="http://sc.admin5.com">去看看吧 &raquo;</a>
                </div>
                <div class="wheel-panel-contents" id="feature-b">
                    <script>// <![CDATA[
                    document.getElementById('feature-b').id = 'page-feature-b';
                    // ]]></script>
                    <h3>Discuz X <span>2.0测试版发布喽</span></h3>
                    <p>Discuz! X2 在继承和完善 Discuz! X1.5 "经典"宗旨的基础上，针对"运营拓展"，"负载性能"，"用户体验"和"管理体验"几大方面，全面优化和打造。</p>
                    <a href="http://sc.admin5.com/">去看看吧 &raquo;</a>
                </div>
            </div>
        </div>
    </div>
</div>
<hr id="feature-divider">
</div>
</div>
    <script>
    $(document).ready(function() {

        var $container = $('#wheel-frame');
        var panelId     = 'wheel-panel';
        var $panel     = $('#wheel-panel');
        var wheel       = document.getElementById('wheel');
        var $wheel     = $(wheel);
        var page        = 0;

        var useTransitions = false;
        (function() {
            var div = document.createElement('div');
            div.innerHTML = '<div style="'
                + '-webkit-transition: color 1s linear;'
                + '-moz-transition: color 1s linear;'
                + '-ms-transition: color 1s linear;'
                + '-o-transition: color 1s linear;'
                + '"></div>';

            useTransitions =
                   (div.firstChild.style.webkitTransition !== undefined)
                || (div.firstChild.style.MozTransition !== undefined)
                || (div.firstChild.style.msTransition !== undefined)
                || (div.firstChild.style.OTransition !== undefined);

            delete div;
        })();

        var angle;
        if (useTransitions) {
            angle = -360.0; // start at an angle to fix font rendering in Windows
        } else {
            angle = 0.0;
        }

        if (typeof wheel.addEventListener != 'undefined') {
            wheel.addEventListener(
                'webkitTransitionEnd',
                showPanel,
                true
            );

            wheel.addEventListener(
                'transitionend',
                showPanel,
                true
            );
        } else {
            wheel.addEvent(
                'transitionend',
                showPanel
            );
        }

        function showPanel()
        {
            Mozilla.Pager.pagers[panelId].setPage(
                Mozilla.Pager.pagers[panelId].pages[page]
            );

            if (useTransitions) {
                $panel
                    .css('opacity', 1.0)
                    .css('bottom', 0);
            } else {
                $panel.animate({ opacity: 1.0, bottom: 0 }, 400);
            }
        }

        function switchPage()
        {
            hidePanel();
            spinWheel();

            if($container.hasClass('a')) {
                $container.removeClass('a');
                $container.addClass('b');
                page = 1;
            } else if ($container.hasClass('b')) {
                $container.removeClass('b');
                $container.addClass('c');
                page = 2;
            } else if ($container.hasClass('c')) {
                $container.removeClass('c');
                $container.addClass('a');
                page = 0;
            }
        }

        function hidePanel()
        {
            if (useTransitions) {
                $panel
                    .css('opacity', 0)
                    .css('bottom', -278);
            } else {
                $panel.animate({ opacity: 0.0, bottom: -278 }, 400);
            }
        }

        function spinWheel()
        {
            angle -= 480.0;

            if (useTransitions) {
                $wheel.rotate(angle);
            } else {
                $wheel.animate({rotate: angle}, 800, 'linear', showPanel);
            }
        }

        window.switchPage = switchPage;
    });
    </script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.admin5.com/" target="_blank">A5源码</a></p>
</div>
</body>
</html>